<template>
  <div class="page">
    <!-- <ul class="bar">
      <li
        v-for="(item, index) in barList"
        :key="index"
        :class="index === activeIndex ? 'active' : ''"
        @click="tapBar(index)"
      >{{item}}</li>
      <div :style="`left: ${activeIndex * 25}%`" class="activeBg"></div>
    </ul> -->
    <!-- 图片区域 -->
    <!-- <v-touch @swiperight="swiperight" @swipeleft="swipeleft" class="imgArea">
      <transition name="fade" v-for="(img, index) in imgList" :key="index">
        <div v-if="index === activeIndex" class="imgWrapper">
          <img alt="img" :src="img" />
        </div>
      </transition>
    </v-touch>
    <div class="title">
      {{fontList[activeIndex].title}}
    </div>
    <div class="desc">
      {{fontList[activeIndex].desc}}
    </div> -->
    <div class="row-1">
      <div class="imgWrapper">
        <img :src="info.typeImg" alt="" />
        <div class="bottom-point"></div>
      </div>
      <div class="font">{{info.genProvince}}的{{(info.typeName || '').slice(0, 1)}}在<span class="yellow">{{info.power || info.powerStationName}}</span>变成可以使用的电能，踏上了从{{info.genProvince}}到{{info.receiveProvince}}的旅途</div>
    </div>
    <div class="context-1">
      <div class="pointer-left">
        <div></div>
      </div>
      <div class="font-from">
        {{info.genProvince}}
      </div>
      <div class="font-to">
        {{info.genProvince}}电网
      </div>
      <div class="pointer-right">
        <div></div>
      </div>
      <div class="connect-line-1"></div>
      <!-- 图标 -->
      <img :src="imgCodeList[`code${info.genProvinceId}`]" alt="" class="position-from" />
      <img :src="imgCodeList[`code${info.genProvinceId}`]" alt="" class="position-to" />
    </div>
    <div class="row-2">
      <div class="imgWrapper">
        <img :src="imgList[1]" alt="" />
        <div class="top-point">
        </div>
      </div>
      <div class="font">它在<span class="yellow">{{info.genProvince}}电网</span>找寻这场旅途的目的地</div>
    </div>
    <div class="context-2">
      <div class="font-to">
        {{info.receiveProvince}}电网
      </div>
      <div class="pointer-left">
        <div></div>
      </div>
      <div class="connect-line-2"></div>
      <!-- 图标 -->
      <img :src="imgCodeList[`code${info.receiveProvinceId}`]" alt="" class="position-to" />
    </div>
    <div class="row-3">
      <div class="imgWrapper">
        <img :src="imgList[2]" alt="" />
        <div class="top-point"></div>
      </div>
      <div class="font">它来到<span class="yellow">{{info.receiveProvince}}电网</span>探索它的使命和责任</div>
    </div>
    <div class="context-3">
      <div class="font-to">
        {{info.receiveProvince}}
      </div>
      <div class="pointer-left">
        <div></div>
      </div>
      <div class="connect-line-3"></div>
      <!-- 图标 -->
      <img :src="imgCodeList[`code${info.receiveProvinceId}`]" alt="" class="position-to" />
    </div>
    <div class="row-4">
      <div class="imgWrapper">
        <img :src="imgList[3]" alt="" />
        <div class="top-point"></div>
      </div>
      <div class="font">在<span class="yellow">{{info.operatorName}}</span>运营的<span class="yellow">{{info.stationName}}充电站</span>的<span class="yellow">{{info.chargerPileNumber}}</span>号充电桩与您的爱车相遇</div>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import img1 from '../assets/type-1.png'
import img2 from '../assets/page2-img-2.png'
import img3 from '../assets/page2-img-3.png'
import img4 from '../assets/page2-img-4.png'
import imgCodeList from '../utils/imagesImport'

export default {
  name: 'PageSecond',
  props: ['info'],
  mounted () {
  },
  watch: {
    // info (info, oldVal) {
    //   this.$data.fontList = [
    //     {
    //       title: dayjs(info.certificateCreateTime).format('YYYY年MM月'),
    //       desc: `${info.genProvince}的${info.type}慢慢变成可以使用的${info.typeName}，它即将来到你身边`
    //     },
    //     {
    //       title: dayjs(info.contractBeginDate).format('YYYY年MM月'),
    //       desc: `北京电力交易中心采购了这批${info.typeName}，${info.type}踏上了漫长的旅途`
    //     },
    //     {
    //       title: dayjs(info.orderCreateTime).format('YYYY年MM月DD日'),
    //       desc: `这批${info.typeName}被调配至编号为123123的充电桩上`
    //     },
    //     {
    //       title: dayjs(info.orderEndTime).format('YYYY年MM月DD日 HH:mm:ss'),
    //       desc: `由${info.operatorName}提供的${info.genProvince}的${info.typeName}进入你的爱车，伴你开启崭新旅程`
    //     }
    //   ]
    // }
  },
  data: () => {
    // const barList = [
    //   '发电',
    //   '采购',
    //   '调配',
    //   '充电'
    // ]
    const imgList = [
      img1,
      img2,
      img3,
      img4
    ]
    // const activeIndex = 0
    return {
      imgList,
      // barList,
      // activeIndex,
      // clientX: 0,
      // moveX: 0,
      // isDown: false,
      // fontList: [{}, {}, {}, {}],
      imgCodeList
    }
  },
  methods: {
    // tapBar (key) {
    //   this.activeIndex = key
    // },
    // swiperight () {
    //   const nextIndex = this.activeIndex - 1
    //   this.activeIndex = nextIndex < 0 ? 0 : nextIndex
    // },
    // swipeleft () {
    //   const nextIndex = this.activeIndex + 1
    //   this.activeIndex = nextIndex > 3 ? 3 : nextIndex
    // }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120px;
    padding: 0 32px;
    .imgWrapper {
      border: 2px solid rgba(74, 138, 104, .6);
      width: 102px;
      height: 102px;
      border-radius: 50%;
      padding: 7px;
      background: rgba(247, 244, 236, .6);
      position: relative;
      z-index: 100;
      .bottom-point {
        width: 0;
        height: 0;
        border-top: 12.5px solid #FFECB9;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        position: absolute;
        bottom: -15.5px;
        left: 50%;
        margin-left: -8px;
      }
      .top-point {
        width: 0;
        height: 0;
        border-bottom: 12.5px solid #FFECB9;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        position: absolute;
        top: -15.5px;
        left: 50%;
        margin-left: -8px;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .font {
      width: 170px;
      font-size: 14px;
      line-height: 20px;
      color: #4A8A68;
      opacity: 0.8;
      font-family: Noto Sans SC;
      font-style: normal;
    }
  }
  .reverse {
    flex-direction: row-reverse;
  }
  .page {
    margin-top: 101px;
    padding-bottom: 40px;
    text-align: left;
    .row-1 {
      .flex;
    }
    .row-2 {
      // margin-top: 180px;
      .flex;
      .reverse;
    }
    .row-3 {
      // margin-top: 92.45px;
      .flex;
    }
    .row-4 {
      .flex;
      .reverse;
    }
    .position-font {
      background: #F7F4EC;
      opacity: 0.8;
      font-family: Noto Sans SC;
      font-style: normal;
      font-weight: normal;
      font-size: 12px;
      line-height: 17px;
      color: #4A8A68;
      opacity: 0.8;
      padding: 0 6px;
      border-radius: 4px;
      z-index: 100;
    }
    .context-1 {
      position: relative;
      height: 180px;
      .pointer-left {
        .pointer;
        top: 13.9px;
        left: 82px;
      }
      .pointer-right {
        .pointer;
        right: 82px;
        bottom: 18px;
      }
      .font-from {
        .position-font;
        position: absolute;
        top: 39.9px;
        left: 91px;
        transform: translateX(-50%);
      }
      .font-to {
        .position-font;
        position: absolute;
        bottom: 42px;
        right: 92px;
        transform: translateX(50%);
      }
      .position-from {
        height: 120px;
        position: absolute;
        top: 23.9px;
        left: 92px;
        transform: translateX(-50%) translateY(-50%);
        z-index: 10;
      }
      .position-to {
        height: 120px;
        position: absolute;
        right: 92px;
        bottom: 28px;
        transform: translateX(50%) translateY(50%);
        z-index: 10;
      }
    }
    .context-2 {
      position: relative;
      height: 92.45px;
      .pointer-left {
        .pointer;
        left: 82px;
        bottom: 18px;
      }
      .font-to {
        .position-font;
        position: absolute;
        bottom: 42px;
        left: 91px;
        transform: translateX(-50%);
      }
      .position-to {
        height: 120px;
        position: absolute;
        left: 92px;
        bottom: 28px;
        transform: translateX(-50%) translateY(50%);
        z-index: 10;
      }
    }
    .context-3 {
      position: relative;
      height: 92.45px;
      .pointer-left {
        .pointer;
        right: 82px;
        bottom: 18px;
      }
      .font-to {
        .position-font;
        position: absolute;
        bottom: 42px;
        right: 92px;
        transform: translateX(50%);
      }
      .position-to {
        height: 120px;
        position: absolute;
        right: 92px;
        bottom: 28px;
        transform: translateX(50%) translateY(50%);
        z-index: 10;
      }
    }
    .pointer {
      width: 10px;
      height: 10px;
      border: 5px solid rgba(255, 236, 185, .5);
      border-radius: 50%;
      position: absolute;
      z-index: 100;
      div {
        height: 100%;
        background: #FFECB9;
        border-radius: 50%;
      }
    }
    
    .connect-line-1 {
      border: 2px solid #F7F4EC;
      border-bottom-left-radius: 12px;
      width: 183px;
      height: 96px;
      border-top: none;
      border-right: none;
      position: absolute;
      z-index: 100;
      left: 91px;
      top: 55px;
    }
    .connect-line-2 {
      border: 2px solid #F7F4EC;
      border-bottom-right-radius: 12px;
      width: 183px;
      height: 60px;
      border-top: none;
      border-left: none;
      position: absolute;
      z-index: 100;
      left: 101px;
      bottom: 28px;
    }
    .connect-line-3 {
      border: 2px solid #F7F4EC;
      border-bottom-left-radius: 12px;
      width: 183px;
      height: 60px;
      border-top: none;
      border-right: none;
      position: absolute;
      z-index: 100;
      right: 101px;
      bottom: 28px;
    }
  }
  .yellow {
    color: #FBB03B;
  }
</style>
